<template>
	<view class="page-view">
		<navBar title="维修确认"></navBar>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<sanCode :equpInfo="{}" :deviceCode="deviceCode" :isDisabled="true" :query-api="getEqupManageByBarcode" :data="'barcode'" @confirmCode="confirmCode"></sanCode>
		</view>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>故障描述
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-wrap-left ml-48rpx mr-48rpx mt-24rpx text-desc">
				<text>故障描述：{{equpInfo.faultDesc}}</text>
			</view>
		</view>
		<view class="bgfff mb-16rpx pb-36rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>故障图片
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="ml-36rpx mr-36rpx mt-32rpx image-view">
				<view class="flex-wrap-left img-item" v-for="(item,index) in equpInfo.imageList" :key="index">
					<image :src="getImageUrl(item.imageUrl)" @click="previewImage(equpInfo.imageList, index)" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>备注
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-wrap-left ml-48rpx mr-48rpx mt-24rpx text-desc">
				<!-- <text>设备具体问题以及详细描述，故障描述故障描述描述描述说明，具体描述问题描述详情，详情描述具体问题</text> -->
				<textarea v-model="equpInfo.remark" :disabled="true" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="备注:" />
			</view>
		</view>
		<view class="" v-if="equpInfo.repairStatus == 2">
			<view class="bgfff mb-16rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>处理方案
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx pb-35rpx">
					<text class="text-plan">{{equpInfo.proceScheme ||'无'}}</text>
				</view>
			</view>
			<view class="bgfff mb-16rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>维修人员信息
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="h-88rpx flex-space-between ml-48rpx mr-48rpx device-view">
					<view class="w-50% text-view">
						<label for="">人员编号：</label>
						<text class="u-line-1">{{equpInfo.handleCode}}</text>
					</view>
					<view class="w-50% text-view">
						<label for="">人员姓名：</label>
						<text class="u-line-1">{{equpInfo.handleName}}</text>
					</view>
				</view>
			</view>
			<view class="bgfff mb-16rpx">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>录入信息
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="flex-space-between mt-26rpx mb-26rpx enterInfo-view">
					<view class="flex-wrap-left text-view ">
						<label for="">是否委派：</label>
						<view class="flex-wrap-left">
							<view class="flex-space-between mr-54rpx ml-30rpx">
								<!-- <image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="!equpInfo.is_entrust"></image> -->
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-if="equpInfo.isEntrust"></image>
								<text>{{equpInfo.isEntrust|| '否'}}</text>
							</view>
							<!-- <view class="flex-space-between">
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="equpInfo.is_entrust"></image>
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
								<text>否</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="flex-space-between enterInfo-view" v-if="equpInfo.entrustInfo">
					<view class="flex-wrap-left text-view ">
						<label for="">委派单位：</label>
						<view class="flex-wrap-left">
							<text>{{equpInfo.entrustInfo}}</text>
						</view>
					</view>
				</view>
				<view class="flex-space-between mt-46rpx enterInfo-view" :class="{isSpareInfo:!equpInfo.spareName}">
					<view class="flex-wrap-left text-view ">
						<label for="">是否更换配件：</label>
						<view class="flex-wrap-left">
							<view class="flex-space-between mr-54rpx ml-30rpx">
								<!-- <image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="!equpInfo.is_spare" @click="equpInfo.is_spare = !equpInfo.is_spare"></image> -->
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-if="equpInfo.isSpare"></image>
								<text>{{equpInfo.isSpare || '否'}}</text>
							</view>
							<!-- <view class="flex-space-between">
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="equpInfo.is_spare" @click="equpInfo.is_spare = !equpInfo.is_spare"></image>
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
								<text>否</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="h-88rpx flex-space-between enterInfo-view" v-if="equpInfo.spareName">
					<view class="w-50% flex-wrap-left text-view ">
						<label for="">配件编号：</label>
						<text>{{equpInfo.spareCode}}</text>
					</view>
					<view class="w-50% flex-wrap-left text-view ">
						<label for="">配件描述：</label>
						<text class="u-line-1">{{equpInfo.spareName}}</text>
					</view>
				</view>
			</view>
			<view class="bgfff pb-36rpx" :class="!isEnter?'mb-136rpx':''">
				<view class="w-100% h-88rpx flex-space-between">
					<view class="flex-wrap-left navigation-little-title ml-32rpx">
						<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>维修确认
					</view>
				</view>
				<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
				<view class="flex-space-between mt-26rpx mb-26rpx enterInfo-view">
					<view class="flex-wrap-left text-view ">
						<label for="">报修人员确认：</label>
						<view class="flex-wrap-left">
							<view class="flex-space-between mr-54rpx ml-30rpx">
								<!-- <image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="!equpInfo.is_entrust"></image> -->
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-if="equpInfo.status"></image>
								<text>{{equpInfo.status|| '待确认'}}</text>
							</view>
							<!-- <view class="flex-space-between">
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="equpInfo.is_entrust"></image>
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
								<text>否</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="flex-space-between enterInfo-view">
					<view class="w-50% flex-wrap-left text-view">
						<label for="">报修人：</label>
						<text>{{equpInfo.callName}}</text>
					</view>
					<view class="w-50% flex-wrap-left text-view ">
						<label for="">时间：</label>
						<text class="u-line-1">{{equpInfo.callTime}}</text>
					</view>
				</view>
				<view class="flex-space-between mt-46rpx enterInfo-view">
					<view class="flex-wrap-left text-view ">
						<label for="">设备主管确认：</label>
						<view class="flex-wrap-left">
							<view class="flex-space-between mr-54rpx ml-30rpx">
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="!maintainInfo.status" @click="maintainInfo.status = !maintainInfo.status"></image>
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-if="maintainInfo.status"></image>
								<text>已解决</text>
							</view>
							<view class="flex-space-between" v-if="!isEnter">
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="maintainInfo.status" @click="maintainInfo.status = !maintainInfo.status"></image>
								<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
								<text>未解决</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-space-between mt-33rpx enterInfo-view" v-if="!maintainInfo.status">
					<textarea v-model="maintainInfo.remark" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="备注:" />
				</view>
			</view>
			<view class="suctionbottom" v-if="!isEnter">
				<view class="yes button" @click="submitBtn">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import sanCode from '@/components/deviceSanCode.vue'
import { ref, watch,onMounted,reactive } from 'vue'
import {getEqupManageByBarcode,setManagerSure} from '@/common/api/equpManage'
import { BASE_URL } from '@/config';
import { useCounterStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { huanjing } = storeToRefs(store)
const props = defineProps<{
	barcode ?: string;
}>()

const equpInfo = ref({});
const maintainInfo = ref({
	status:true,//维系人员确认
	remark:'',//备注
})
const deviceCode = ref<string>('');
const deviceShow = ref<boolean>(false);
const remarkTest = ref<string>('');
if(props.barcode){
	deviceCode.value = props.barcode;
}
const isEnter = ref<boolean>(false);
const confirmCode = (data:any)=>{
	deviceShow.value = true;
	equpInfo.value = data;
	maintainInfo.value.status = data.managerStatus=='已解决' || data.managerStatus == ''?true:false;
	isEnter.value = data.managerStatus=='已解决'?true:false;
	maintainInfo.value.remark = data.managerRemark;
}
//提交
const submitBtn = ()=> {
	setManagerSure({
		id: equpInfo.value.id,
		status:maintainInfo.value.status?2:1,
		remark:maintainInfo.value.remark
	}).then(res=>{
		if(res.code === 2000){
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			uni.redirectTo({
				url: '/pages/homePage/index',
			});
		}
		
	})
}
function getImageUrl(imageUrl: string) {
	if(huanjing.value === 'local'){
		return `${BASE_URL}/pad/${imageUrl}`
	} else if (huanjing.value === 'fat'){
		return `http://10.10.113.30:10000/aipu/${imageUrl}`
	} else if(huanjing.value === 'preannouncement'){
		return `http://172.16.197.14:10000/aipu/${imageUrl}`
	} else if(huanjing.value === 'prod'){
		return `http://172.16.197.56:10000/aipu/${imageUrl}`
	}
}

function previewImage(files: [], index: string) {
	const photoList = files.map((item:any) => getImageUrl(item.imageUrl));
	uni.previewImage({
		current: index,
		urls: photoList,
		indicator: 'number',
	});
}
</script>

<style lang="scss" scoped>
	.page-view{
		height: 100%;
		overflow-y: auto;
	}
	.bgfff{
		background-color: #fff;
	}
	.navigation-little-title {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0F1F2D;
		line-height: 28rpx;
	}
	.text-plan{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		line-height: 32rpx;
	}
	uni-textarea{
		width: 654rpx;
		height: 118rpx;
	}
	::v-deep .uni-textarea-placeholder{
		// z-index: 9;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CACACA;
		padding: 20rpx;
	}
	::v-deep .uni-textarea-textarea{
		width: 654rpx;
		height: 118rpx;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.uni-textarea-wrapper{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.device-view{
		.text-view{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			label{
				width: 120rpx;
			}
			text{
				display: inline-block;
				max-width: calc(100% - 130rpx);
				vertical-align: text-bottom;
			}
		}
	}
	.enterInfo-view{
		margin-left:48rpx;
		margin-right:48rpx;
		.text-view{
			label{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(30,31,34,0.85);
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4B4D55;
			}
			::v-deep .u-input{
				width: 534rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 2rpx;
				border: 1rpx solid #DDDDDD;
				.u-input__input{
					height: 100%;
					padding-left: 24rpx;
				}
				.uni-input-placeholder{
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CACACA;
				}
			}
		}
	}
	.isSpareInfo{
		padding-bottom: 34rpx;
	}
	.suctionbottom .button {
		width: 100%;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}
	.suctionbottom .no {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
	.suctionbottom .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}
	.item-view{
		margin:24rpx 48rpx 38rpx 48rpx ;
		label{
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			line-height: 32rpx;
		}
		.form-input{
			width: calc(100% - 120rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 0 24rpx;
			position: relative;
			.uni-input-form{
				font-size: 24rpx;
				
			}
			.uni-input-placeholder{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
			.qr-img,.date-text{
				position: absolute;
				top: 22rpx;
				right: 24rpx;
			}
			.date-text{
				color: #2F7BFF;
			}
		}
	}
	.isdeviceShow{
		margin-bottom: 0;
	}
	.image-view{
		display: grid;
		grid-template-columns:calc(50% - 100rpx) calc(50% - 100rpx) 200rpx;
		.img-item{
			width: 200rpx;
			height: 200rpx;
			border-radius: 2rpx;
			border: 2rpx solid rgba(0,0,0,0.15);
			overflow: hidden;
			margin-right: 26rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
			&:nth-last-child(-n+3){
				margin-bottom: 0;
			}
		}
	}
</style>
